<template>
  <div id="app">
    <ErrorBoundary @error="handleGlobalError">
      <router-view />
    </ErrorBoundary>

    <!-- 性能监控组件 -->
    <!-- <PerformanceMonitor /> -->
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { useUserStore } from "@/stores";
import ErrorBoundary from "@/components/ErrorBoundary.vue";
import PerformanceMonitor from "@/components/PerformanceMonitor.vue";

const userStore = useUserStore();

// 全局错误处理
const handleGlobalError = (error: Error, errorInfo: any) => {
  console.error("Global error caught by ErrorBoundary:", error);

  // 在生产环境中发送错误报告
  if (import.meta.env.PROD) {
    // 发送到错误监控服务
    // reportErrorToService(error, errorInfo)
  }
};

// 应用初始化
onMounted(() => {
  // 从本地存储恢复用户状态
  userStore.initializeFromStorage();

  // 性能优化：预加载关键资源
  preloadCriticalResources();
});

// 预加载关键资源
const preloadCriticalResources = () => {
  // 预加载字体
  const fontLink = document.createElement("link");
  fontLink.rel = "preload";
  fontLink.as = "font";
  fontLink.type = "font/woff2";
  fontLink.crossOrigin = "anonymous";
  fontLink.href = "/fonts/main.woff2";
  document.head.appendChild(fontLink);

  // 预加载关键图片
  const criticalImages = ["/images/logo.png", "/images/default-avatar.png"];

  criticalImages.forEach((src) => {
    const img = new Image();
    img.src = src;
  });
};
</script>

<style>
#app {
  width: 100%;
  min-height: 100vh;
}
</style>
